<script setup>
import { ref, onMounted } from 'vue';
import {
    reqPublicClassDetail,
    reqExaminePublicClassNote
} from '@/api/teacher/record/publicClass';
import router from '@/router';
import { useRoute } from 'vue-router';
import { useTeacherStore } from '@/stores/modules/teacherStore.js';
import { showFailToast, showSuccessToast, showNotify } from 'vant';

const teacherStore = useTeacherStore();

const route = useRoute();

// checkbox ref
const isPromise = ref(false);

// 该申请条是否完成
const isCompleted = ref(true);

// 详情信息
const note = ref({});

// 是否处于加载状态
const loading = ref(true);

// 获取申请详细信息
const getDetail = async () => {
    try {
        const result = await reqPublicClassDetail(route.query.id);

        if (result.status == 200) {
            const roleNums = teacherStore.roleNums;

            note.value = result.data;

            const data = result.data;

            if (roleNums.includes(96)) {
                if (data.managerStatus == 1 || data.managerStatus == 2) {
                    isCompleted.value = false;
                }
            }
            if (roleNums.includes(97) && !roleNums.includes(95)) {
                if (data.appointmentProgress == 1) {
                    isCompleted.value = false;
                }
            }
            if (roleNums.includes(95)) {
                if (data.appointmentProgress != 0 && data.managerStatus != 0) {
                    isCompleted.value = false;
                }
            }

            loading.value = false;
        } else {
            throw new Error(result.statusText);
        }
    } catch (e) {
        showFailToast(e.message || '数据获取失败');
        router.go(-1);
    }
};

const agreeClickHandler = isOk => {
    if (isPromise.value) {
        submit(isOk);
    } else {
        showNotify({
            message: '请勾选同意事项',
            type: 'warning'
        });
    }
};

const submit = async isOk => {
    try {
        const result = await reqExaminePublicClassNote({
            status: isOk,
            id: route.query.id
        });

        if (result.status == 200) {
            showSuccessToast('提交成功, 5秒之后返回主页');
            const timer = setTimeout(() => {
                router.push({ name: 'home-teacher' });
                clearTimeout(timer);
            }, 5000);
        } else {
            throw new Error(result.statusText);
        }
    } catch (e) {
        showFailToast(e.message || '提交失败');
    }
};

onMounted(() => {
    getDetail();
});
</script>

<template>
    <div class="container" v-loading="loading">
        <div class="heading">公共教师预约</div>
        <el-descriptions :column="1" class="wrapper-content" size="large">
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="申请人"
            >
                {{ note.name }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="使用时间"
            >
                {{ note.date }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="申请教室"
            >
                {{ note.classroomInfo }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="具体人数"
            >
                {{ note.people }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="教师数量"
            >
                {{ note.classroomQuantity }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="具体用途"
            >
                {{ note.specificApplications }}
            </el-descriptions-item>
        </el-descriptions>
        <template v-if="isCompleted">
            <div class="promise">
                <p>审核人承诺以上申请事项真实、有效，并承诺本次审核事项:</p>
                <p>一、遵守国家法律法规和学校规章制度;</p>
                <p>二、知晓并遵守相应安全规定;</p>
                <p>三、对所申请事项负责。</p>
                <p>
                    <el-checkbox
                        size="large"
                        v-model="isPromise"
                        label="我已知晓上述事项"
                    />
                </p>
            </div>
            <div class="wrapper-btn">
                <el-button
                    type="primary"
                    @click="agreeClickHandler(1)"
                    size="large"
                    >同意</el-button
                >
                <el-button
                    type="primary"
                    @click="agreeClickHandler(0)"
                    size="large"
                    >不同意</el-button
                >
            </div>
        </template>
        <template v-else>
            <div class="complete">当前审核已完成</div>
        </template>
    </div>
</template>

<style scoped lang="scss">
.container {
    font-size: 16rem;
    background-color: rgb(247, 247, 247);
}

.heading {
    font-size: 20rem;
    font-weight: bold;
    text-align: center;
    width: 70%;
    margin: auto;
    border-bottom: 1px solid #333;
    height: 60rem;
    line-height: 70rem;
    margin-bottom: 20rem;
}

.wrapper-content {
    padding: 0 40rem;
}

.promise {
    padding: 0 40rem;
    margin: auto;
    font-size: 14rem;
    color: #666;
    p {
        margin-bottom: 4rem;
    }
    .tip {
        color: #333;
        margin-left: 10rem;
    }
}

.wrapper-btn {
    width: 100%;
    display: flex;
    justify-content: center;
}

.complete {
    font-size: 18rem;
    text-align: center;
    font-weight: bold;
}

:deep(.content) {
    font-size: 18rem !important;
}
</style>
